<script setup>
import { Delete } from "@element-plus/icons-vue";
import { usePersistStore, useShortStore } from "@/stores";
import { storeToRefs } from "pinia";
const shortStore = useShortStore();
const persistStore = usePersistStore()
const { downLoadData, shortDelete,getTobaccoShort } = shortStore;
const { shortList } = storeToRefs(persistStore);
getTobaccoShort();
</script>
<template>
  <CardPage>
    <template #title>缺料登记</template>
    <template #button>
      <div>
        <el-button type="primary" class="button" @click="downLoadData"
          >导出</el-button
        >
      </div>
    </template>
    <el-table
      :data="shortList"
      border
      style="width: 55%; height: 30vw; margin-top: 1vw"
      size="default"
    >
      <el-table-column type="index" width="60" label="序号"></el-table-column>
      <el-table-column label="RFid号" width="200" prop="rfid">
      </el-table-column>
      <el-table-column label="产地" width="100" prop="location">
      </el-table-column>
      <el-table-column label="年份" width="80" prop="year"> </el-table-column>
      <el-table-column label="部位" width="80" prop="part"> </el-table-column>
      <el-table-column label="名称" width="150" prop="name"> </el-table-column>
      <el-table-column label="评估状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.evaluate === 0">否</span>
          <span v-else-if="scope.row.evaluate === 1">是</span>
        </template>
      </el-table-column>
      <el-table-column label="移除">
        <template #default="scope">
          <el-button
            size="large"
            type="danger"
            :icon="Delete"
            circle
            plain
            @click="shortDelete(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
  </CardPage>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.button {
  width: 3vw;
}
.el-empty {
  /* background-color: lightblue; */
  width: 13vw;
  height: 13vw;
  margin: 3vw -5vw;
}
.el-pagination {
  margin: 3vw 40vw;
}
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  margin-top: 1vw;
}
#button {
  width: 8vw;
  margin: 3vw;
  display: flex;
  justify-content: space-between;
}
#button .el-button {
  width: 3vw;
}
</style>
